<template>
  <NSpace justify="space-between" :wrap-item="false">
    <n-ellipsis style="max-width: 240px">
      <span style="vertical-align: text-top">{{ domain }}</span>
    </n-ellipsis>
    <NDropdown trigger="hover" :options="options">
      <NButton quaternary>
        <template #icon>
          <NIcon><EllipsisHorizontal /></NIcon>
        </template>
      </NButton>
    </NDropdown>
  </NSpace>
</template>
<script setup lang="ts">
import { NSpace, NButton, NIcon, NDropdown, NEllipsis } from 'naive-ui'
import { EllipsisHorizontal, TrashBin } from '@vicons/ionicons5'
import { useDomain } from '@/stores/domain'
const route = useRoute()
const router = useRouter()

const props = defineProps<{
  domain: string
}>()
const options = [
  {
    label: '删除',
    key: 'delete',
    icon: () => h(NIcon, {}, { default: () => h(TrashBin) }),
    props: {
      onClick: async () => {
        await useFetch('/api/domain/' + props.domain, {
          method: 'DELETE',
          watch: false
        })
        useDomain().getDomains()
        if (route.fullPath === `/domain/${props.domain}`) {
          // route.
          router.replace({ path: '/' })
        }
      }
    }
  }
]
// function select(key,option){
//   if(key ==='delete'){

//   }
// }
</script>
